<template>
  <main class="main">
    <img src="@/assets//images/404.png" alt="" />
    <p>{{$t('mall.page_not_found')}}</p>
    <div class="btn">
      <el-button type="primary" @click="goBack">{{$t('mall.back_to_previous_page')}}</el-button>
      <el-button type="primary" @click="goHome">{{$t('mall.back_to_homepage')}}</el-button>
    </div>
  </main>
</template>
<script setup>
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const router = useRouter();

const goBack = () => {
  router.go(-1);
};

const goHome = () => {
  router.push('/');
};
</script>
<style lang="scss" scoped>
.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  p {
    font-size: 16px;
    color: #afb0fa;
  }
  .btn {
    margin-top: 100px;
    button {
      margin: 0 60px;
    }
  }
}
</style>
